<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>论坛小黑屋详情</span>
        <el-button style="float: right;" type="primary" @click="goBack">返回</el-button>
      </div>
      
      <el-form ref="form" :model="form" label-width="120px" disabled>
        <el-row>
          <el-col :span="12">
            <el-form-item label="禁言记录ID：" prop="id">
              <el-input v-model="form.id" />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="用户昵称：" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户手机号：" prop="phone">
              <el-input v-model="form.phone" />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="用户邮箱：" prop="email">
              <el-input v-model="form.email" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="12">
            <el-form-item label="禁言原因：" prop="reason">
              <el-input v-model="form.reason" type="textarea" />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="状态：" prop="status">
              <el-input v-model="statusText" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="12">
            <el-form-item label="禁言时间：" prop="createTime">
              <el-input v-model="createTimeText" />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="解禁时间：" prop="releaseTime">
              <el-input v-model="releaseTimeText" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getBlackUserInfo } from "@/api/forum/blackuser";

export default {
  name: "BlackuserDetail",
  data() {
    return {
      form: {},
    };
  },
  computed: {
    statusText() {
      return this.form.status === 0 ? '已解禁' : '已禁言';
    },
    createTimeText() {
      return this.form.createTime ? this.parseTime(this.form.createTime) : '';
    },
    releaseTimeText() {
      return this.form.releaseTime ? this.parseTime(this.form.releaseTime) : '';
    }
  },
  created() {
    const id = this.$route.params.id;
    this.getDetail(id);
  },
  methods: {
    /** 获取详情 */
    getDetail(id) {
      getBlackUserInfo(id).then(response => {
        this.form = response.data;
      });
    },
    
    /** 返回 */
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.el-card {
  min-height: calc(100vh - 150px);
}
</style>